<template>
  <div>
    <el-form  :model="form" :rules="rules" ref="form"  label-width="100px" label-position="left" class="demo-ruleForm" >
         <el-form-item label="用户昵称" prop="uname"  >
              <el-input v-model="form.uname" placeholder="请输入用户昵称" ></el-input>
          </el-form-item>
          <el-form-item label="用户密码" prop="upwd"  >
              <el-input type="password" v-model="form.upwd" placeholder="请输入用户密码" ></el-input>
          </el-form-item>
          <el-form-item v-if="protype !== 2" label="确认密码" prop="checkPass">
            <el-input type="password" v-model="form.checkPass" autocomplete="off" placeholder="请再次输入用户密码"></el-input>
          </el-form-item>
          <el-form-item label="身份类型" prop="user_type" >
            <el-select v-model="form.user_type" placeholder="请选择身份类型">
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户电话" prop="phone"  >
              <el-input v-model="form.phone" placeholder="请输入用户电话" ></el-input>
          </el-form-item>
          <el-form-item label="用户邮箱"  prop="email" >
              <el-input v-model="form.email" placeholder="请输入用户邮箱" ></el-input>
          </el-form-item>
          <el-form-item label="用户真实姓名"  >
              <el-input v-model="form.user_name" placeholder="请输入用户真实姓名" ></el-input>
          </el-form-item>
          <el-form-item label="用户性别"  >
            <el-radio-group v-model="form.isNew">
              <el-radio label="false" >小姐姐</el-radio>
              <el-radio label="true" >小哥哥</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="用户QQ"  >
              <el-input v-model="form.qq" placeholder="请输入用户QQ" ></el-input>
          </el-form-item>
          <el-form-item label="用户生日"  >
            <div class="block">
              <el-date-picker
                v-model="form.birthday"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </el-form-item>
       
        
      <el-form-item>
          <el-button v-if="protype == 2"  type="primary" @click="Submit()" >确定修改</el-button>
          <el-button v-else type="primary" @click="Onsubmit()" >立即新增</el-button>
          <el-button @click="resetForm('form')">取消</el-button>
      </el-form-item>
    </el-form>
      
  </div>
</template>

<script>
  export default {
    // 子组件通过props接收的是值，可以在子组件的钩子函数中直接用this使用
    props: {
      protype: Number,
      rows:Object
    },
    data(){
          var validatePass2 = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.form.upwd) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
          };
          return{
            // 修改
            formData:{},
            // 选择器
            options: [{
              value: 0,
              label: '普通用户'
            }, {
              value: 1,
              label: '系统管理员'
            }, {
              value: 2,
              label: '店铺管理员'
            }],
            // 表单内容
            form:{
              user_type:'',
              uname:'',
              upwd:'',
              checkPass:'',
              phone:'',
              user_name:'',
              email: '',
              qq:'',
              birthday: '',
              
            },
              // 验证表单
              rules:{
                uname:[ { required: true, message: '必填', trigger: 'blur' }],
                user_type:[ { required: true, message: '必填', trigger: 'blur' }],
                upwd:[ 
                  { required: true, message: '必填', trigger: 'blur' },
                  { pattern: /^[a-zA-Z]\w{5,17}$/, message: "请输入由6-18字母开头数字组成", trigger: ['blur', 'change']}
                ],
                email:[ 
                  { required: true, message: '必填', trigger: 'blur' },
                  { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                phone:[ 
                  { required: true, message: '必填', trigger: 'blur' },
                  { pattern: /^1[3-9]\d{9}$/, message: "手机号错误", trigger: ['blur', 'change'] }
                ],
                checkPass: [ 
                    { required: true, message: '必填', trigger: 'blur' },
                   { validator: validatePass2, trigger: 'blur' }
                  ],
              },
          }
    },
      methods: {
        handle(rows){
          //通过this.$emit将operation已事件的方式传递给父组件，并将index，rows作为参数传递
          this.$emit("operation", rows); 
        },

          // 提交表单
        Onsubmit(){
          this.$refs['form'].validate(valid=>{
            if (valid) {
              // this.img.map( (item,intex) => {
              //   this.form[`img${intex+1}`] = item
              // })
              // if(this.form.isNew == 1){
              //   this.form.isNew = null
              // }
              // console.log(this.form);
              this.handle(this.form)
            } else {
              this.$message({
                showClose: true,
                message: '表单填写有错误',
                type: 'error'
              });
            }
          });
        },
        // 修改
        Submit(){
          this.$refs['form'].validate(valid=>{
            if (valid) {
              // console.log(this.form,'11');
              this.handle(this.form)
            } else {
              this.$message({
                showClose: true,
                message: '失败',
                type: 'error'
              });
            }
          });
        }
      },
      mounted(){
        if(this.protype == 2){
          this.formData = this.rows
          this.form = this.formData
        }
       
      }
  }
</script>

<style lang="scss" scoped>

</style>